<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 产业总览"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" style="margin: 0;position: relative;" :gutter="10" v-if="zfNameflag">
      <el-col :span="9" class="content-left">
        <el-col class="box">
          <div class="title">全省化工产业整体情况</div>
          <div class="moveson"></div>
          <div class="content-body" style="margin-top: 3px">
            <div class="content-body-left">
              <div class="content-body-left-box">
                <div class="content-body-left-top">化工园区数</div>
                <div class="content-body-left-bottom">{{ industryEntQty }}</div>
              </div>
              <div
                class="content-body-left-box"
                style="border-left: 1px solid #aecaf2;padding-left:10px"
              >
                <div class="content-body-left-top">规上化工企业数</div>
                <div class="content-body-left-bottom">
                  {{ industryGsEntQty }}
                </div>
              </div>
              <div class="content-body-left-box">
                <div class="content-body-left-top">
                  上年度营收<span style="font-size: 12px; font-weight: 300"
                    >(亿元)</span
                  >
                </div>
                <div class="content-body-left-bottom">
                  {{ industryMainIncome }}
                </div>
              </div>
              <div
                class="content-body-left-box"
                style="border-left: 1px solid #aecaf2;padding-left:10px"
              >
                <div class="content-body-left-top">
                  上年度税收<span style="font-size: 12px; font-weight: 300"
                    >(亿元)</span
                  >
                </div>
                <div class="content-body-left-bottom">
                  {{ industryActualTax }}
                </div>
              </div>
            </div>
            <div class="content-body-right">
              <div id="revenue" style="width: 100%; height: 180px"></div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">化工园区整体情况</div>
          <div class="moveson"></div>
          <div class="content-body" style="margin-top:3px">
            <div class="content-body-left" style="margin-top: 0">
              <div class="content-body-left-box" style="margin: 0 auto">
                <div class="content-body-left-top">入园化工企业数</div>
                <div
                  class="content-body-left-bottom"
                  style="color: #4972ff; margin: 10px auto"
                >
                  {{ parkEntQty }}
                </div>
              </div>
              <div
                class="content-body-left-box"
                style="border-left: 1px solid #aecaf2; margin: 0 auto;padding-left:10px"
              >
                <div class="content-body-left-top">危化品企业入园率</div>
                <div
                  class="content-body-left-bottom"
                  style="color: #4972ff; margin: 10px auto"
                >
                  {{ admissionRate }}%
                  <!-- {{ 57.4 }}% -->
                </div>
              </div>
              <div class="content-body-left-box" style="margin: 10px auto 5px">
                <div class="content-body-left-top" style="height: 28px">
                  上年度营收<br/>(亿元)
                </div>
                <div
                  class="content-body-left-bottom"
                  style="color: #4972ff; margin: 10px auto"
                >
                  {{ parkMainIncome }}
                </div>
              </div>
              <div
                class="content-body-left-box"
                style="border-left: 1px solid #aecaf2; margin: 10px auto 5px;padding-left:10px"
              >
                <div class="content-body-left-top" style="height: 28px">
                  上年度税收<br/>(亿元)
                </div>
                <div
                  class="content-body-left-bottom"
                  style="color: #4972ff; margin: 10px auto"
                >
                  {{ parkActualTax }}
                </div>
              </div>
              <div class="content-body-left-box" style="margin: 5px auto 0">
                <div class="content-body-left-top" style="height: 28px">
                  园区总面积<br/>(亩)
                </div>
                <div
                  class="content-body-left-bottom"
                  style="color: #4972ff; margin: 10px auto"
                >
                  {{ allParkArea }}
                </div>
              </div>
              <div
                class="content-body-left-box"
                style="border-left: 1px solid #aecaf2; margin: 5px auto 0;padding-left:10px"
              >
                <div class="content-body-left-top" style="height: 28px">
                  亩均税收<br/>(万元/亩)
                </div>
                <div
                  class="content-body-left-bottom"
                  style="color: #4972ff; margin: 10px auto"
                >
                  {{ parkTaxPerMu }}
                </div>
              </div>
            </div>
            <div class="content-body-right">
              <div class="tabs">
                <div
                  :class="active === 1 ? 'selectActive' : ''"
                  @click="activeClick(1)"
                >
                  营收
                </div>
                <div
                  :class="active === 2 ? 'selectActive' : ''"
                  @click="activeClick(2)"
                  style="border-left: 1px solid #7db2d0"
                >
                  税收
                </div>
                <div
                  :class="active === 3 ? 'selectActive' : ''"
                  @click="activeClick(3)"
                  style="border-left: 1px solid #7db2d0"
                >
                  亩均税收
                </div>
                <div
                  :class="active === 0 ? 'selectActive' : ''"
                  @click="activeClick(0)"
                  style="border-left: 1px solid #7db2d0"
                >
                  园区指数
                </div>
              </div>
              <div id="tableColor">
                <el-table
                  ref="table"
                  :data="tableData"
                  style="width: 100%"
                  height="170"
                  stripe
                  :row-class-name="tableRowClassName"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0', height: '36px' }"
                >
                  <el-table-column
                    property="parkName"
                    :show-overflow-tooltip="true"
                    width="90"
                    label="园区名称"
                  >
                    <template scope="scope">
                      <span style="color: #00a3ff;cursor: pointer;" @click="goParkOverviewDetail(scope.row)">{{scope.row.parkName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="showInfo"
                    :show-overflow-tooltip="true"
                    :label="showInfo"
                  ></el-table-column>
                  <el-table-column
                    type="index"
                    header-align="center"
                    align="center"
                    width="80"
                    :show-overflow-tooltip="true"
                    label="全省排名"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">化工企业名录</div>
          <div class="moveson"></div>
          <div class="content-body" id="tableColor1" style="margin-top: 3px">
            <el-col :span="12">
              <el-table
                ref="table1"
                :data="tableData1"
                style="width: 100%"
                height="220"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0', height: '36px' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  :show-overflow-tooltip="true"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  property="entName"
                  :show-overflow-tooltip="true"
                  label="企业名称"
                ></el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <div
                id="enterpriseNumber"
                style="width: 100%; height: 220px"
              ></div>
            </el-col>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="7"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5);position: relative;"
      >
        <div id="map" style="width: 100%; height: 491px"></div>
        <div class="map-info">
          <div class="park-name" :name="parkInfo.parkName">{{parkInfo.parkName}}</div>
          <div class="park-info">规上企业数：{{parkInfo.entQty}}</div>
          <div class="park-info" :name="parkInfo.address">园区地址：{{parkInfo.address}}</div>
          <div class="park-info" :name="parkInfo.primeMoverIndustry">主要产业：{{parkInfo.primeMoverIndustry}}</div>
          <div class="park-info">上年度产业营收：{{parkInfo.parkMainIncome}}亿元</div>
        </div>
        <div class="box" style="margin-top: 10px">
          <div class="title" style="padding-left:5px">安全生产概览</div>
          <div class="moveson"></div>
          <div class="content-body" style="margin-top:3px">
            <div
              id="workmanship"
              style="width: 50%; float: left; height: 220px"
            ></div>
            <div
              id="source"
              style="width: 50%; float: left; height: 220px"
            ></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-row :gutter="10">
          <el-col>
            <el-col class="box">
              <div class="title">产业分类概况</div>
              <div class="moveson"></div>
              <div class="content-body" style="margin-top: 3px;">
                <el-col :span="12">
                  <div id="industryClassification" style="width: 100%; height: 180px"></div>
                </el-col>
                <el-col :span="12">
                  <el-table
                    ref="table3"
                    :data="tableData3"
                    style="width: 100%"
                    stripe
                    :row-style="{ height: '0' }"
                    :cell-style="{ padding: '5px 0', height: '36px' }"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column
                      type="index"
                      :show-overflow-tooltip="true"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      property="name"
                      :show-overflow-tooltip="true"
                      label="行业"
                    ></el-table-column>
                    <el-table-column
                      property="value"
                      :show-overflow-tooltip="true"
                      label="营收(亿元)"
                    ></el-table-column>
                  </el-table>
                </el-col>
              </div>
            </el-col>
          </el-col>
          <el-col>
            <el-col class="box">
              <div class="title">产业运行概览</div>
              <div class="moveson"></div>
              <div class="content-body" id="tableColor2" style="margin-top:3px">
                <el-col :span="12">
                  <div class="tabs" style="width: fit-content">
                    <div
                      :class="active2 === 'A' ? 'selectActive' : ''"
                      @click="active2Click('A')"
                    >
                      A类
                    </div>
                    <div
                      :class="active2 === 'B' ? 'selectActive' : ''"
                      @click="active2Click('B')"
                      style="border-left: 1px solid #7db2d0"
                    >
                      B类
                    </div>
                  </div>
                  <el-table
                    ref="table2"
                    :data="tableData2"
                    style="width: 100%"
                    stripe
                    height="184"
                    :row-style="{ height: '0' }"
                    :cell-style="{ padding: '5px 0', height: '36px' }"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column
                      type="index"
                      :show-overflow-tooltip="true"
                      label="序号"
                    ></el-table-column>
                    <el-table-column
                      property="entName"
                      :show-overflow-tooltip="true"
                      label="企业名称"
                    ></el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="12">
                  <div
                    id="IndustrialOperation"
                    style="width: 100%; height: 210px"
                  ></div>
                </el-col>
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col class="box">
              <div class="title">环保概览</div>
              <div class="moveson"></div>
              <div class="content-body" style="margin-top: 6px; height: 228px">
                <ul>
                  <li
                    class="overview"
                    v-for="(item, index) in overviewArr"
                    :key="index"
                  >
                    <img src="../../../assets/img/zf/5.png" alt="" />
                    <span style="margin-left: 10px">{{ item.name }}</span>
                    <span style="float: right; color: rgb(73, 114, 255)">{{
                      item.num
                    }}个</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <div class="box">
              <div class="title" style="padding-left:5px">危化品概况</div>
              <div class="moveson"></div>
              <div class="content-body" style="margin-top:3px">
                <div class="content-body-top">
                  <div class="box-title" style="margin: 14px auto">
                    <div
                      style="
                        width: 4px;
                        height: 16px;
                        background-color: #00a3ff;
                        float: left;
                      "
                    ></div>
                    <span>&nbsp;危化品企业</span>
                  </div>
                  <div class="box-body">
                    <el-row
                      type="flex"
                      justify="space-around"
                      style="margin-top: 5px"
                    >
                      <el-col :span="11" class="enterprise-box">
                        <div>生产</div>
                        <div>{{ productionEntQty }}家</div>
                      </el-col>
                      <el-col :span="11" class="enterprise-box">
                        <div>经营</div>
                        <div>{{ transportEntQty }}家</div>
                      </el-col>
                    </el-row>
                    <el-row
                      type="flex"
                      justify="space-around"
                      style="margin-top: 5px"
                    >
                      <el-col :span="11" class="enterprise-box">
                        <div>运输</div>
                        <div>{{ experienceEntQty }}家</div>
                      </el-col>
                      <el-col :span="11" class="enterprise-box">
                        <div>其他</div>
                        <div>{{ otherEntQty }}家</div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="box-title" style="margin: 15px auto">
                    <div
                      style="
                        width: 4px;
                        height: 16px;
                        background-color: #00a3ff;
                        float: left;
                      "
                    ></div>
                    <span>&nbsp;危化品车辆运输</span>
                  </div>
                  <div
                    class="box-body"
                    style="overflow: hidden; margin: 10px auto"
                  >
                    <div
                      class="box-body-left"
                      style="
                        float: left;
                        width: 50%;
                        padding: 0 4px;
                        border-right: 1px solid #aecaf2;
                      "
                    >
                      <div style="color: #1c4ca1; margin-bottom: 10px; font-size: 12px">
                        实时在途汽车
                      </div>
                      <div style="color: #4972ff; font-size: 18px">
                        {{ inTransitCarQty }}辆
                      </div>
                    </div>
                    <div
                      class="box-body-right"
                      style="float: left; width: 50%; padding: 0 5px"
                    >
                      <div style="color: #1c4ca1; margin-bottom: 10px; font-size: 12px">
                        今日装货总量
                      </div>
                      <div style="color: #4972ff; font-size: 18px">
                        {{ totalLoadingToday }}吨
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="content-body-bottom"></div> -->
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>

</script>
<script>
const echarts = require("echarts");
import dd from 'gdt-jsapi'
import govheader from "@/components/govheader";
import govnavigation from '@/components/govnavigation'
export default {
  name: "zfIntelligentDiagnostic",
  components: { govheader, govnavigation },
  data() {
    return {
      zfNameflag: true,
      year: "",
      center: "",
      industryEntQty: "",
      industryGsEntQty: "",
      industryMainIncome: "",
      industryActualTax: "",
      parkEntQty: "",
      admissionRate: "",
      parkMainIncome: "",
      parkActualTax: "",
      allParkArea: "",
      parkTaxPerMu: "",
      productionEntQty: "",
      transportEntQty: "",
      experienceEntQty: "",
      otherEntQty: "",
      inTransitCarQty: "",
      totalLoadingToday: "",
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      parkInfo: {
        parkName: '园区名称',
        entQty: '0',
        address: '',
        primeMoverIndustry: '',
        parkMainIncome: '0'
      },
      overviewArr: [
        {
          name: "废水监测站",
          num: "",
        },
        {
          name: "废气监测站",
          num: "",
        },
        {
          name: "大气监测站",
          num: "",
        },
        {
          name: "水监测站",
          num: "",
        },
      ],
      active: 1,
      active2: "A",
      showInfo: "营收(亿元)",
      option1xAxisData: [],
      option1Data1: [],
      option1Data2: [],
      myChart1: "",
      option1: "",
      myChart2: "",
      option2: "",
      center: "",
      center2: "",
      myChart3: "",
      option3: "",
      myChart4: "",
      option4: "",
      myChart5: "",
      option5: "",
      myChart6: "",
      option6: "",
      myChart7: "",
      option7: "",
      myChart1IntervalId: '',
      myChart6IntervalId: '',
    };
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted() {
    this.year = new Date().getFullYear() - 1;
    this.getRevenue();
    this.getWorkmanship();
    this.getSource();
    this.getIndustryClassification();
    this.getEnterpriseNumber();
    this.getIndustrialOperation();
    this.getright_table();
    this.getright_table1();
    this.getright_table2();
    this.$http
      .post(`/home/government/industryOverview/getParkInfoPage`, {
        searchKey: "income",
        searchYear: this.year,
      })
      .then(({ data: res }) => {
        this.tableData = res.data;
        clearInterval(_this.intervalId);
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getright_table();
      })
      .catch(() => {});
    this.$http
      .post(`/home/government/industryOverview/info`, {
        searchYear: this.year,
      })
      .then(({ data: res }) => {
        this.parkInfo.parkName = res.data.parkCoordinate[0].parkName
        this.parkInfo.entQty = res.data.parkCoordinate[0].entQty
        this.parkInfo.address = res.data.parkCoordinate[0].address
        this.parkInfo.primeMoverIndustry = res.data.parkCoordinate[0].primeMoverIndustry
        this.parkInfo.parkMainIncome = res.data.parkCoordinate[0].parkMainIncome
        this.industryEntQty = res.data.parkCoordinate.length
        this.industryGsEntQty = res.data.industryGsEntQty;
        this.industryMainIncome = res.data.industryMainIncome;
        this.industryActualTax = res.data.industryActualTax;
        this.option1.xAxis[0].data = this.option1xAxisData =  res.data.industryMainIncomeView.years;
        this.option1.series[0].data = this.option1Data1 =
          res.data.industryMainIncomeView.mainIncome;
        this.option1Data2 = res.data.industryMainIncomeView.actualTax;
        this.parkEntQty = res.data.parkEntQty;
        this.admissionRate = res.data.admissionRate;
        this.parkMainIncome = res.data.parkMainIncome;
        this.parkActualTax = res.data.parkActualTax;
        this.allParkArea = res.data.allParkArea.toFixed(0);
        this.parkTaxPerMu = res.data.parkTaxPerMu;
        this.tableData1 = res.data.entNameInfo;
        this.option6.yAxis.data = res.data.cityEntQty.cityName;
        this.option6.series[0].data = res.data.cityEntQty.entQty;
        this.option3.series[0].data = res.data.dangerChemicalTechnology.map(
          (item) => {
            return {
              name: item.typeName,
              value: item.technologyQty,
            };
          }
        );
        this.option4.series[0].data = res.data.dangerSource.map((item) => {
          return {
            name: item.typeName,
            value: item.sourceQty,
          };
        });
        let map = {}
        res.data.parkCoordinate.forEach((item) => {
          map[item.parkAbbreviation] = [item.longitude, item.latitude, item.parkName, item.entQty, item.address, item.primeMoverIndustry, item.parkMainIncome]
        })
        this.center = map
        this.overviewArr[0].num = res.data.wasteWaterStateQty;
        this.overviewArr[1].num = res.data.wasteGasStateQty;
        this.overviewArr[2].num = res.data.atmosphereStateQty;
        this.overviewArr[3].num = res.data.waterStateQty;
        this.productionEntQty = res.data.productionEntQty;
        this.transportEntQty = res.data.transportEntQty;
        this.experienceEntQty = res.data.experienceEntQty;
        this.otherEntQty = res.data.otherEntQty;
        this.inTransitCarQty = res.data.inTransitCarQty;
        this.totalLoadingToday = res.data.totalLoadingToday;
        res.data.industrialEntInfo.forEach(item =>{
          this.option5.series[0].data.push({
            name: item.industryName,
            value: item.standardSizedQty,
          })
          this.tableData3.push({
            name: item.industryName,
            value: item.mainBusinessIncome
          })
        });
        this.option7.series[0].data = res.data.industrialInfo.map((item) => {
          return {
            name: item.minorName,
            value: item.entQty,
            industryMinor: item.industryMinor,
          };
        });
        this.tableData2 = res.data.industrialInfoEnt;
        this.myChart1.setOption(this.option1);
        this.myChart3.setOption(this.option3);
        this.myChart4.setOption(this.option4);
        this.myChart5.setOption(this.option5);
        this.myChart6.setOption(this.option6);
        this.myChart7.setOption(this.option7);
        let flag = true
        this.myChart1IntervalId = setInterval(() => {
          if (this.myChart1 !== '' && this.myChart1 !== null && this.myChart1 !== undefined) {
            this.myChart1.dispose()
          }
          this.getRevenue();
          this.option1.xAxis[0].data = this.option1xAxisData
          if (flag) {
            this.option1.series[0].itemStyle.color = '#00F1E9'
            this.option1.series[0].data = this.option1Data2
            this.option1.series[0].name = '税收'
          } else {
            this.option1.series[0].itemStyle.color = "rgb(97, 133, 255)"
            this.option1.series[0].data = this.option1Data1
            this.option1.series[0].name = '营收'
          }
          this.myChart1.setOption(this.option1)
          flag = !flag
        }, 7000);
        let num1 = 0
        let num2 = 5
        this.myChart6IntervalId = setInterval(() => {
          if (this.option6.dataZoom[0].startValue+1 === this.option6.series[0].data.length) {
            num1 = 0
            num2 = 5
            this.option6.dataZoom[0].startValue = num1
            this.option6.dataZoom[0].endValue = num2
          } else {
            this.option6.dataZoom[0].startValue = num1+=1
            this.option6.dataZoom[0].endValue = num2+=1
          }
          this.myChart6.setOption(this.option6)
        }, 2000);
        this.$nextTick(() => {
          this.renderMyChart();
        });
      })
      .catch(() => {});
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    getright_table() {
      let _this = this
      var isScroll = true;
      var waitFlag = 0
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // let height = document.getElementsByClassName('el-table__body-wrapper')[0].childNodes[0]
      // console.log(height);
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table1() {
      var isScroll = true;
      var waitFlag = 0
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId1 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    getright_table2() {
      var isScroll = true;
      var waitFlag = 0
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table2;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId2 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    activeClick(val) {
      let _this = this;
      this.active = val;
      let param;
      if (val === 0) {
        param = "parkIndex";
        this.showInfo = "园区指数";
      } else if (val === 1) {
        param = "income";
        this.showInfo = "营收(亿元)";
      } else if (val === 2) {
        param = "tax";
        this.showInfo = "税收(亿元)";
      } else if (val === 3) {
        param = "muPerTax";
        this.showInfo = "亩均税收(万元)";
      }
      this.$http
        .post(`/home/government/industryOverview/getParkInfoPage`, {
          searchKey: param,
          searchYear: this.year,
        })
        .then(({ data: res }) => {
          this.tableData = res.data;
          clearInterval(_this.intervalId);
          this.$refs.table.bodyWrapper.scrollTop = 0;
          this.getright_table();
        })
        .catch(() => {});
    },
    active2Click(val) {
      let _this = this;
      this.active2 = val;
      this.$http
        .post(`/home/government/industryOverview/getMuPerTypePage`, {
          searchYear: this.year,
          muPerType: val,
        })
        .then(({ data: res }) => {
          this.option7.series[0].data = res.data.industrialInfo.map((item) => {
            return {
              name: item.minorName,
              value: item.entQty,
              industryMinor: item.industryMinor,
            };
          });
       
          
          this.myChart7.setOption(this.option7);

          this.tableData2 = res.data.industrialInfoEnt;
          clearInterval(_this.intervalId2);
          this.$refs.table2.bodyWrapper.scrollTop = 0;
          this.getright_table2();
        })
        .catch(() => {});
    },
    getRevenue() {
      this.myChart1 = echarts.init(document.getElementById("revenue"));
      this.option1 = {
        animationDuration: 2000,
        tooltip: {
          trigger: "axis",
          confine: true,
        },
        // color: ["#13B9FB"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        legend: {
          top: 0,
          right: 15,
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
          },
        ],
        yAxis: {
          type: "value",
          name: "亿元",
        },
        series: [
          {
            name: "营收",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              color: "rgb(97, 133, 255)",
            },
            data: [],
          }
        ],
      };
      this.myChart1.setOption(this.option1);
    },
    getEnterpriseNumber() {
      let _this = this
      this.myChart6 = echarts.init(document.getElementById("enterpriseNumber"));
      this.option6 = {
        // animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          formatter: "{b}:{c}家",
          padding: [0,5]
        },
        color: ["#13B9FB"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 5,
            yAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          // splitLine: {
          //   lineStyle: {
          //     color: "rgb(141,175,221)",
          //   },
          // },
        },
        yAxis: {
          type: "category",
          // boundaryGap: false,
          data: [],
        },
        series: [
          {
            type: "bar",
            barWidth: 15,
            itemStyle: {
              color: "rgb(97, 133, 255)",
            },
            data: [],
          },
        ],
      };
      this.myChart6.setOption(this.option6);
      this.autoPlay(_this.myChart6, _this.option6, "startCharts6");
    },
    // 浙江省地图
    renderMyChart () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('map'))
      let uploadedDataURL = require('./zhejiang.json')
      let scatterData1 = []
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item))
      }
      echarts.registerMap('js', uploadedDataURL)
      this.option2 = {
        title: {
          text: '浙江省化工产业分布',
          top: '10px',
          textStyle: {
            width: '100%',
            color: '#1c4ca1',
            'font-weight': 700
          }
        },
        geo: [
          {
            map: 'js',
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: '100%',
            layoutCenter: ['50%', '45%'],
            zoom: 0.9,
            itemStyle: {
              areaColor: 'rgba(156, 216, 255, 0.7)',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: 'rgba(156, 216, 255, 0.7)'
              },
              label: {
                show: true,
                color: '#333333'
              }
            },
            label: {
              show: true,
              color: '#333333'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbol: 'circle',
            symbolSize: 6,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'fill',
              scale: 3
            },
            hoverAnimation: true,
            itemStyle: {
              color: 'rgb(0, 141, 221)'
            },
            label: {
              formatter: function (para) {
                return para.data[7]
              },
              position: 'right',
              color: '#333333',
              borderColor: '#005DDC',
              borderWidth: 1,
              borderType: 'solid',
              padding: 5,
              backgroundColor: 'rgba(255, 255, 255, 1)',
              show: false
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            },
            data: scatterData1,
            zlevel: 10
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.mapAutoPlay(_this.myChart2, _this.option2, 'startCharts2')
    },
    getWorkmanship() {
      let _this = this;
      this.myChart3 = echarts.init(document.getElementById("workmanship"));
      let colorList = [
        "rgb(0, 163, 255)",
        "rgb(0, 219, 212)",
        "rgb(168, 133, 240)",
        "rgb(95, 131, 255)",
        "rgb(101, 215, 123)",
      ];
      this.option3 = {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}个",
          confine: true,
          padding: [0,5]
        },
        title: {
          text: "危险化工工艺",
          left: "50%",
          top: "1%",
          textAlign: "center",
          textStyle: {
            fontSize: "14px",
            fontWeight: 300,
            color: "#4B5463 ",
          },
        },
        legend: {
          orient: "horizontal",
          top: "bottom",
          type: 'scroll',
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "45%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: false,
              },
              formatter: "{c}%",
              color: "auto",
            },
            itemStyle: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
          },
        ],
      };
      this.myChart3.setOption(this.option3);
      this.autoPlay(_this.myChart3, _this.option3, "startCharts3");
    },
    getSource() {
      let _this = this;
      this.myChart4 = echarts.init(document.getElementById("source"));
      let colorList = [
        "rgb(0, 163, 255)",
        "rgb(0, 219, 212)",
        "rgb(168, 133, 240)",
        "rgb(95, 131, 255)",
      ];
      this.option4 = {
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}个",
          confine: true,
          padding: [0,5]
        },
        title: {
          text: "危险源",
          left: "50%",
          top: "1%",
          textAlign: "center",
          textStyle: {
            fontSize: "14px",
            fontWeight: 300,
            color: "#4B5463 ",
          },
        },
        legend: {
          orient: "horizontal",
          top: "bottom",
          left: 45
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "45%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                show: false,
              },
              formatter: "{c}%",
              color: "auto",
            },
            itemStyle: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
          },
        ],
      };
      this.myChart4.setOption(this.option4);
      this.autoPlay(_this.myChart4, _this.option4, "startCharts4");
    },
    getIndustryClassification() {
      let _this = this;
      this.myChart5 = echarts.init(document.getElementById("industryClassification"));
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}家",
          confine: true,
          padding: [0,5]
        },
        // title: {
        //   text: "各产业企业数分布",
        //   left: "49%",
        //   top: "1%",
        //   textAlign: "center",
        //   textStyle: {
        //     fontSize: "14px",
        //     fontWeight: 300,
        //     color: "#4B5463 ",
        //   },
        // },
        color: ["#00A3FF", "#00DBD4", "#A885F0", "#5F83FF", "#65D77B"],
        // legend: {
        //   orient: "vertical",
        //   right: 10,
        //   top: 20,
        //   bottom: 20,
        //   type: "scroll",
        // },
        series: [
          {
            type: "pie",
            legendHoverLink: false,
            center: ["50%", "50%"],
            radius: ["40%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              //标识
              normal: {
                show: false,
                // position: 'center',
                formatter: "{d}%\n{b}",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
      };
      this.myChart5.setOption(this.option5);
      this.autoPlay(_this.myChart5, _this.option5, "startCharts5");
    },
    getIndustrialOperation() {
      let _this = this;
      this.myChart7 = echarts.init(
        document.getElementById("IndustrialOperation")
      );
      this.option7 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c}家",
          confine: true,
          padding: [0,5]
        },
        title: {
          text: "各产业企业数分布",
          left: "49%",
          top: "1%",
          textAlign: "center",
          textStyle: {
            fontSize: "14px",
            fontWeight: 300,
            color: "#4B5463 ",
          },
        },
        color: ["#00A3FF", "#00DBD4", "#A885F0", "#5F83FF", "#65D77B"],
        // legend: {
        //   orient: "vertical",
        //   right: 10,
        //   top: 20,
        //   bottom: 20,
        //   type: "scroll",
        // },
        series: [
          {
            type: "pie",
            legendHoverLink: false,
            center: ["50%", "50%"],
            radius: ["40%", "60%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              //标识
              normal: {
                show: false,
                // position: 'center',
                formatter: "{d}%\n{b}",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
      };
      this.myChart7.setOption(this.option7);
      this.autoPlay(_this.myChart7, _this.option7, "startCharts7");
    },
    goParkOverviewDetail(val){
      let _this = this
      clearInterval(_this.myChart1IntervalId);
      clearInterval(_this.myChart6IntervalId);
      this.$router.push({
        name: "zfParkOverviewDetail",
        query: {
          parkCode: val.parkCode,
          parkName: val.parkAllName,
          longitude: val.longitude,
          latitude: val.latitude,
          year: this.year,
        },
      });
    },
    mapAutoPlay(myChart, option, timer) {
      var _this = this
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === 'series') {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          let data = option.series[0].data[charPiecurrentIndex]
          if (data) {
            _this.parkInfo.parkName = data[2]
            _this.parkInfo.entQty = data[3]
            _this.parkInfo.address = data[4]
            _this.parkInfo.primeMoverIndustry = data[5]
            _this.parkInfo.parkMainIncome = data[6]
          }

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        let data = option.series[0].data[charPiecurrentIndex]
        _this.parkInfo.parkName = data[2]
        _this.parkInfo.entQty = data[3]
        _this.parkInfo.address = data[4]
        _this.parkInfo.primeMoverIndustry = data[5]
        _this.parkInfo.parkMainIncome = data[6]

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      //高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });

      timer = setInterval(chartHover, 5000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000);
          flag = true;
        }
      });
    },
    // 饼状图自动播放
    autoPlay(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        clearInterval(timer);
        //取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        //高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      timer = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000);
          flag = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.top {
  height: 80px;
  line-height: 60px;
  box-sizing: border-box;
  color: rgb(115, 188, 235);
  background-image: url("../../../assets/img/zf/top_bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
  font-size: 16px;
}
.content {
  padding: 5px 0 0;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 45%;
  }
  .content-body-right {
    width: 55%;
  }
}
.content-body-left-top{
  font-size: 12px;
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
.content-body-left-box {
  width: 48%;
  margin: 1%;
  float: left;
  margin: 10px auto;
}
.content-body-left-bottom {
  color: rgb(73, 114, 255);
  font-weight: 600;
  font-size: 18px;
  margin: 15px auto;
  height: 20px;
}
.content-body-top,
.content-body-bottom {
  width: 100%;
}
.colorBox {
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
  color: #ffffff;
}
.box1 {
  background-image: url("../../../assets/img/zf/12.png");
}
.box2 {
  background-image: url("../../../assets/img/zf/11.png");
}
.box3 {
  background-image: url("../../../assets/img/zf/10.png");
}
.overview {
  height: 55px;
  line-height: 55px;
}
.enterprise-box {
  background-color: rgb(219, 239, 255);
  border-radius: 15px;
  overflow: hidden;
  padding: 10px;
  > div:nth-child(1) {
    float: left;
    color: #1c4ca1;
  }
  > div:nth-child(2) {
    float: right;
    color: rgb(73, 114, 255);
  }
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
.map-info {
  position: absolute;
  left: 10px;
  top: 370px;
  width: 60%;
  height: 120px;
  background-image: url('../../../assets/img/zf/map-info-bg.png');
  background-size: 100% 100%;
  z-index: 99;
  padding: 15px 10px;
  .park-name {
    width: 100%;
    font-size: 14px;
    color: #0044F3;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #4076FF;
    margin-bottom: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .park-info {
    width: 100%;
    color: #001B5F;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
@keyframes mymove {
        from {
          width: 0px;
        }
        to {
          width: 170px;
        }
      }
      @keyframes mymove1 {
        from {
          left: 0px;
        }
        to {
          left: 170px;
        }
      }
      .moveson {
        height: 2px;
        background: #00a3ff;
        border-radius: 2px 0 0 2px;
        animation: mymove 5s linear infinite;
        position: relative;
        top: 3px;
      }
      // .moveson::before {
      //   position: absolute;
      //   top: 0;
      //   bottom:0;
      //   left:2px;
      //   right:0;
      //   width: 2px;
      //   height: 2px;
      //   content: "";
      //   z-index: 100;
      //   margin: 0;
      //   background: #1c4ca1;
      //   border-radius: 0 2px 2px 0;
      //   animation: mymove1 5s linear infinite;
      // }
</style>
